<template>
  <el-dialog
    :model-value="popShow"
    :title="DialogTitle"
    width="50%"
    @close="Closepop"
  >
    <el-form :rules="rules" ref="formRef" :model="form" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
        v-if="DialogTitle === '添加用户'"
      >
        <el-input type="password" v-model="form.password" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="form.mobile" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Closepop">取消</el-button>
        <el-button type="primary" @click="Confirmpop">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  defineEmits,
  ref,
  shallowReactive,
  reactive,
  watch,
  defineProps,
} from "vue";
import { ElMessage } from "element-plus";
import apis from "@/http/apis";
const formRef = ref(); //定义表单的ref实例，在提交之后掉ref的表单验证方法
//定义form表单

let form = reactive({
  username: "",
  password: "",
  email: "",
  mobile: "",
});
let props = defineProps({
  //在子组件里创建父组件v-model的值的prop可以拿到绑定的值
  popShow: Boolean, //是否显示
  DialogTitle: String, //弹窗标题
  EditData: {
    type: Object,
    default: {},
  }, //编辑需用到的当前对象
});
// console.log(popShow, "pppp");
//监听当前对象的变化
watch(
  () => props.EditData, //新值
  () => {
    //监听输入的值的变化将当前的对象赋给form
    form = props.EditData as any;
    console.log(form.mobile);
  },
  {
    //处理函数
    deep: true,
    immediate: true,
  }
);
const emits = defineEmits(["update:modelValue", "initUserlist"]); //通过发送modelValue事件向父组件传值改变弹窗的状态

const Closepop = () => {
  emits("update:modelValue", false);
};
//确认处理函数
const Confirmpop = async () => {
  console.log(form);
  //表单验证
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      props.DialogTitle === "添加用户"
        ? await apis.addUserList(form)
        : await apis.EditUser(form);
      ElMessage({
        message: "添加用户成功",
        type: "success",
      });
      emits("initUserlist"); //发送事件让父组件刷新数据
      Closepop();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

//表单校验规则
const rules = shallowReactive({
  username: [
    {
      required: true,
      message: "请您填写用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请填写密码",
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      message: "请您填写邮箱",
      trigger: "blur",
    },
    {
      type: "email",
      message: "请输入正确邮箱",
      trigger: ["blur", "change"],
    },
  ],
  mobile: [
    {
      required: true,
      message: "请填写手机号",
      trigger: "blur",
    },
    {
      pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      message: "请填写正确的手机号",
    },
  ],
});
</script>

<style lang="less" scoped></style>
